<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Lava Lamp Menu</title>


<link type="text/css" rel="stylesheet" media="all" href="styles/accordion-css.css" />
<link type="text/css" href="table.css" rel="stylesheet">
<link href="styles/css-menu.css" rel="stylesheet" type="text/css" />
<link href="chosen/chosen.css"  rel="stylesheet" type="text/css" />
<link href="css/application.css"  rel="stylesheet" type="text/css" />
<link href="css/bread-curm-navigation.css"  rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="pqgrid/pqgrid.min.css" />
<link rel="stylesheet" href="pqgrid/themes/Office/pqgrid.css" />
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />



<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery.alphanum.js"></script>
<script src="js/waypoints.js"></script>

<script src="js/inputmask/jquery.inputmask.js"></script>
<script src="js/inputmask/jquery.inputmask.extensions.js"></script>
<script src="js/inputmask/jquery.inputmask.date.extensions.js"></script>
<script src="js/inputmask/jquery.inputmask.numeric.extensions.js"></script>
<script src="js/inputmask/jquery.inputmask.regex.extensions.js"></script>
<script src="pqgrid/pqgrid.dev.js"></script>



<script>
$(function() {
$("#left-side").load("left-side.html", function(){
$('#accordion>h3').bind("click", function(){
	$(this).next('div').slideToggle();
	if($(this).hasClass('active'))
	{
		$(this).removeClass('active');
		$(this).children('span').text("+");
	}
	else{
	$(this).addClass('active');
	$(this).children('span').text("-");
	
	}
	
	
});
});
$("#top-section").load("top-bar.html");

	$(".top-menu-holder").load("css-menu.html", function(){
		// hover property will help us set the events for mouse enter and mouse leave
	$('.navigation li').hover(
		// When mouse enters the .navigation element
		function () {
			//Fade in the navigation submenu
			$('div', this).fadeIn(); 	// fadeIn will show the sub cat menu
		}, 
		// When mouse leaves the .navigation element
		function () {
			//Fade out the navigation submenu
			$('div', this).fadeOut();	 // fadeOut will hide the sub cat menu		
		}
	);
	});

});
function load(screen)
{
$("#content-side").load(screen+".html",function(){

$('.number').inputmask("integer");
 $(".date").inputmask("dd/mm/yyyy");
  $(".date").datepicker();
 $(".amount").inputmask('decimal');
 $(".phone").inputmask({ mask: ["999-999-9999", "+91 999 999 9999"], showTooltip: true });
 $(".phone-ext").inputmask({ mask: ["999-999-9999x9999"], showTooltip: true });
 $(".alpha").alpha();
 

});
}
</script>

<style>
.settings-button {
    background-color: #343433;
    border: 1px solid #161615;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
    display: block;
    height: 28px;
    margin: 20px 44px;
    opacity: 0.7;
    width: 36px;
    z-index: 2;
}
.breadcrum-search {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 12px 12px 12px 12px;
    float: right;
    font-family: Tahoma,Geneva,sans-serif;
    height: 25px;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 4px 0 10px;
}
.breadcrum-search input[type="text"], .breadcrum-search input[type="text"]:hover{
    background: none repeat scroll 0 0 white;
    box-shadow: none;
	border:none;
}
.breadcrum-search input[type="button"] {
    background: url("images/search.png") no-repeat scroll 6px 6px transparent;
    border: medium none;
    cursor: pointer;
    float: right;
    height: 25px;
    width: 22px;
    z-index: 100;
}
.sticky{position:fixed;
  top:0;
  left:0;}

</style>

<script type="text/javascript">
$(document).ready(function() {
 $('.breadcrumb').waypoint(function(event, direction) {
        $(this).css('position', "fixed");
        //event.stopPropagation();
    });
 $( "#toolbar-options>button" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-gear"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-gear",

},
text: false
}); 	

});
</script>
</head>

<body>
<div style="display: block; background: none repeat scroll 0% 0% red; height: 100px; margin: auto; z-index: 9999999; width: 1024px;">
<ul class="ribbon">
            <li><h2>Add</h2>
			<a data-action="/application/getInputScreen" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				Application 
			</a>
			
			 <a data-action="/finance/getInputScreen" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				Finance 
			</a>
			 <a data-action="/user/getInputScreen" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				User 
			</a>
			 <a data-action="/vendor/getInputScreen" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				Vendor 
			</a>
            </li>
			
			<li><h2>Administrator</h2>
			<a data-action="/vendor" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				Vendors 
			</a>
			<a data-action="/user" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				Users 
			</a>
			<a data-action="/finance" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				Finance 
			</a>
			<a data-action="/application" class="action" href="#">
					<img src="http://localhost:8080/resources/resources/ribbon/images/icon_datetime.png" alt="Date and time">
				Application 
			</a>
			
            </li>
          </ul>
		 </div>
		 <div style="display:block;">
<div class="window">
	<div class="window-holder">
		<h4 class="window-header-title"><span>Add Financial Product</span>
		
		
		
		</h4>
		<div class="window-content">
			<div class="breadcrumb green">
				<a href="javascript:loadContent('add')" class="active">Vendor Details</a>
				<a href="javascript:loadContent('ratecard/add')">Vendor Settings</a>
				<a href="javascript:loadContent('rateband/add')">Security Settings</a>
				<div  class="breadcrum-search">
					<input type="text" id="searchTxt"/>
					<input id="search-button" data-text="searchTxt" type="button" value=""/></div>
			</div>
			
	<div id="window-content-holder">
	
	<form id="vendorForm" modelAttribute ="vendor" method="POST" action="${url}" name="vendorForm">

<table attributes="class='inputTable'">
	<tr>
		<td colspan="4" class="subSectionBottomBorder">										
			<h4>label.vendor.details
			<div id="toolbar-options" style="float:right">
				<button>Button with icon only</button>
				<button>Button with icon on the left</button>
				<button>Button with two icons</button>
				<button>Button with two icons and no text</button>
			</div>	
			</h4>
		</td>
	</tr>
  <tr>
    <td><label>label.vendor"</label></td>
    <td><label>label.vendor"</label></td>
    <td><label>label.vendor</label></td>
    <td><label>label.parent.vendor</label></td>
  </tr>
  <tr>
    <td append="div"><input path="vendor.vendorCode" name="vendorCode"></input></td>
    <td append="div"><input path="vendor.vendorName" name="vendorName" class='required'></input></td>
    <td append="div"><select path="vendor.vendorLevel" id='verdorLevel' items="${lovBean.list('VND.LVL')}" /></td>
    <td append="div"><select path="vendor.vendorParent" id='verdorParent' items="${lovBean.list('VND.TYPE')}" /></td>
  </tr>
  <tr>
    <td><label>label.status</label></td>
    <td><label>label.effective</label></td>
    <td><label>label.expirelabel.date</label></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td ><select path="vendor.vendorStatus" id='verdorStatus' items="${lovBean.list('VND.STTS')}" /></td>
    <td ><input path="vendor.effectiveDate" id='effectiveDate' name="effectiveDate" cssClass="date"></input></td>
    <td ><input path="vendor.expireDate"  id='expireDate' name="expireDate" cssClass="date"></input></td>
    <td>&nbsp;</td>
  </tr>
  	<tr>
		<td colspan="4" class="subSectionBottomBorder">										
			<h4>label.current.address</h4>
		</td>
	</tr>
	<tr>
		<td class="labelClass">lable.suitno</td>
		<td class="labelClass labelMandatory">lable.streetno</td>
		<td class="labelClass labelMandatory">label.street.name</td>
		<td class="labelClass">lable.mobile.phone</td>
		
	</tr>
	<tr>
		<td><input path="address.suitNo" maxlength="5" /></td>
		<td><input path="address.streetNo" maxlength="6" /></td>
		<td><input path="address.streetName"/></td>
		<td><input path="address.homePhone" maxlength="14" class="optional phone"/></td>
		
	</tr>
	<tr>
		<td class="labelClass labelMandatory">label.city</td>
		<td class="labelClass labelMandatory">label.province</td>
		<td class="labelClass labelMandatory">label.postal.code</td>
		<td><label>label.fax</label></td>
		
	</tr>
	
   <tr>
		<td><input path="address.city" maxlength="30" /></td>
		<td>
			<input path="address.provinceCode"/>
					
		</td>
		<td align="left"><input path="address.postalCode" size="10" /></td>
		<td><input path="address.fax" maxlength="30" class="optional email"/></td>
		
	</tr>
  
 
    
</table>
<div id='showSearchResult'></div>

</form>
	
	
	</div>
</div>
<div class="button-holder green">
<button id="addVendor" type="button" class="active">Validate</button>
<button id="validateVendor" type="button" class="active">Submit</button>
</div>
				
			</div>
</div>	
</div>
</body>
</html>